<template>
    <div style="padding: 10px;">
        <a-form-model :model="config" >
            <span><strong>{{i18n('form.ds','数据源')}}</strong></span>
            <div  style="margin-top: 10px;margin-bottom: 30px;">
                <a-form-model-item :label="i18n('form.dataSources','数据来源')">
                    <a-radio-group v-model="config.dataSource" @change="dataSourceChange">
                        <a-radio  value="form">{{$ti18('rxForm.formName','表单')}}</a-radio>
                        <a-radio  value="insNew">{{i18n('form.newsAnnounce','新闻公告')}}</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <!--表单-->
                <div v-if="config.dataSource=='form'">
                    <a-form-model-item :label="$ti18('rxForm.formName','表单')">
                        <rx-input-button style="width: 80%" v-model="form" :allowInput="true" @change="changeButton" @click="selectForm" @input="handInput" ></rx-input-button>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.image','图片')">
                        <a-select style="width: 80%" v-model="config.imgField" :options="fields" :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('rxDialog.name', '标题')">
                        <a-select style="width: 80%" v-model="config.titleField" :options="fields" :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </a-form-model-item>
                </div>
                <!--新闻公告-->
                <div v-else-if="config.dataSource=='insNew'">
                    <a-form-model-item :label="$ti18('rxForm.rxAlias', '别名')" >
                        <a-input style="width: 80%"  v-model="config.alias"></a-input>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('rxDialog.name', '标题')">
                        <a-input style="width: 80%"  v-model="config.name"></a-input>
                    </a-form-model-item>
                    <a-form-model-item :label="$ti18('rxForm.type', '类型')">
                        <a-select  v-model="config.newType" style="width: 80%" :getPopupContainer="(p)=>p.parentNode">
                            <a-select-option v-for="item in sysDicNewList" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </div>
            </div>

            <span><strong>{{i18n('list.chartSet','轮播图设置')}}</strong></span>
            <a-form-model-item :label="i18n('list.maxDisplay','最多显示')" style="margin-top: 10px;">
                <a-input style="width: 80%" type="number" v-model="config.maxNum"></a-input>
            </a-form-model-item>
            <a-form-model-item  :label="i18n('list.fillStyle','填充方式')" style="margin-top: 10px;">
                <a-radio-group v-model="config.fillType" button-style="solid" @change="fillTypeChange" size="small">
                    <a-radio-button value="fill">{{i18n('list.fillDisplay','填满显示')}}</a-radio-button>
                    <a-radio-button value="full">{{i18n('list.fullDisplay','完整显示')}}</a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item v-if="config.fillType=='full'" :label="i18n('list.bgColor', '背景色')" style="margin-top: 10px;">
                <a-select  v-model="config.backColor" style="width: 80%" :getPopupContainer="(p)=>p.parentNode">
                    <a-select-option value="black">{{i18n('list.black','黑色')}}</a-select-option>
                    <a-select-option value="white">{{i18n('list.white','白色')}}</a-select-option>
                    <a-select-option value="grey">{{i18n('list.grey','灰色')}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item  :label="i18n('list.effect','动画效果')" style="margin-top: 10px;">
                <a-radio-group v-model="config.effect" button-style="solid" size="small">
                    <a-radio-button value="scrollx">{{i18n('list.roll','滚动')}}</a-radio-button>
                    <a-radio-button value="fade">{{i18n('list.fadeInOut','淡入淡出')}}</a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item :label="i18n('list.interval','间隔')" style="margin-top: 10px;">
                <a-input style="width: 80px;" type="number" v-model="config.autoplaySpeed"></a-input>
                <span style="margin-left: 5px;">{{i18n('list.seconds','秒')}}</span>
            </a-form-model-item>
            <a-form-model-item  :label="i18n('list.clickImage','点击图片')" style="margin-top: 10px;">
                <a-select  v-model="config.clickFunc" style="width: 80%" :getPopupContainer="(p)=>p.parentNode">
                    <a-select-option value="dialog">{{i18n('list.popover','弹窗')}}</a-select-option>
                    <a-select-option value="noAction">{{i18n('list.noAction','无动作')}}</a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import ComponentDef from './ComponentDef'
import {GridMixin} from "@lowcode/jpaas-common-lib";
import DialogBox from "@/assets/js/DialogBox";
import FormBoEntityApi from "@/api/form/bo/formBoEntity";
import InsNewsApi from "@/api/portal/core/insNews";

export default {
    name: "carousel-def",
    mixins:[GridMixin,ComponentDef],
    data() {
        return {
            config:{
                dataSource:"form",
                alias:"",
                name:"",
                bodefId:"",
                imgField:"",
                titleField:"",
                fillType:"fill",
                effect:"scrollx",
                maxNum:10,
                clickFunc:"dialog",
                autoplaySpeed:3
            },
            form:"",
            //表单字段
            fields:[],
            //新闻类型
            sysDicNewList:[]
        }
    },
    created() {
        if (this.conf) {
            this.config = this.conf;
            if(this.config.dataSource=='form' && this.config.bodefId){
                this.form = `{text:'${this.config.name}',value:'${this.config.alias}'}`
                this.initField(this.config.bodefId);
            }
        }
        this.getInsSysDicNewList();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        selectForm(vm) {
            var self_ = this
            var config = {curVm: this, widthHeight: ['1100px', '660px'], zIndex: 999999, data: {multiSelect: false}}
            DialogBox.openForm(config, function (data) {
                if (!data) {
                    self_.$notification.warning({message: self_.$ti18('rxMsa.tipsInfo','提示信息'), description: self_.$comi18('formDef.selectForm', '请选择一个表单!')})
                    return
                }
                self_.form = `{text:'${data.name}',value:'${data.alias}'}`
                self_.config.alias = data.alias
                self_.config.name = data.name;
                self_.config.bodefId = data.bodefId;
                self_.initField(data.bodefId);
                self_.$emit('dragclick', self_.config, self_.index, self_.type)
            })
        },
        changeButton(val){
            this.config.name = eval("(" + val + ")").text
        },
        handInput(data) {
            if (!data) {
                this.config.alias = ''
                this.config.name = ''
            }
        },
        initField(boDefId){
            FormBoEntityApi.getFieldByBoDefId(boDefId, '_main').then(data => {
                this.fields=data.map(item => {
                    return {label: item.comment, value: item.fieldName}
                });
            })
        },
        dataSourceChange(e){
            var self=this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                content: this.i18n('msg.clearConfig','您确定要切换数据来源并清理配置？'),
                zIndex:40000,
                okText: this.$ti18('rxForm.okBtn','确定'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    if(e.target.value=='form'){
                        self.config.fillType="";
                    }else{
                        self.config.bodefId="";
                        self.form="";
                        self.config.imgField="";
                        self.config.titleField="";
                    }
                    self.config.name="";
                    self.config.alias="";
                },
                onCancel(){
                    if(e.target.value=='form'){
                        self.config.dataSource='insNew';
                    }else{
                        self.config.dataSource='form';
                    }
                }
            })
        },
        fillTypeChange(value){
            if(value=="full"){
                this.$set(this.config,"backColor","black");
            }else {
                delete this.config.backColor;
            }
        },
        getInsSysDicNewList() {
            InsNewsApi.getTopDicByKeyAndAppId("").then(data => {
                this.sysDicNewList = data;
            });
        },
    },
    watch: {
        config:{
            handler: function (val, oldVal) {
                var self_ = this ;
                setTimeout(function (){
                    self_.$emit('dragclick',val);
                },500);
            },
            deep: true
        }
    }
}
</script>

<style scoped>
</style>